<template>
  <div>
    <!-- 路由传参的第二种写法，通过params参数传参 -->
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 1：rest风格传参，直接在路径后拼接，在路由配置的地方指定哪个是参数，用的比较多 -->
        <!-- <router-link
          :to="`/home/details/showInfo/${m.id}/${m.value}`"
          >{{ m.value }}</router-link
        > -->

        <!-- 2：对象方式传递（复杂场景推荐） -->
        <router-link
          :to="{
            //注意：params方式不允许使用path指定路由！！！
            name: 'xiangqing',
            params: {
              id: m.id,
              value: m.value,
            },
          }"
          >{{ m.value }}</router-link
        >
      </li>
    </ul>
    <hr />
    <!-- 展示区 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Details",
  data() {
    return {
      messageList: [
        { id: "001", value: "消息001" },
        { id: "002", value: "消息002" },
        { id: "003", value: "消息003" },
      ],
    };
  },
};
</script>
